import { useSelector } from "react-redux"
import { StateType } from "../store"
import { ComponentsStateType } from "../store/componentsReducer"

// 多个页面都会用到组件信息  比如 组件库、图层列表
function useGetComponentInfo() {
    // 这个StateType是store存储的类型

    // 没有添加 undo 的写法
    // const components = useSelector<StateType>(state => state.components) as ComponentsStateType

    // 添加了 undo 的写法
    const components = useSelector<StateType>(state => state.components.present) as ComponentsStateType

    const { componentList = [], selectedId, copiedComponent } = components

    // 查找选中的组件
    const selectedComponent = componentList.find(c => c.fe_id === selectedId)

    return {
        componentList,
        selectedId,
        selectedComponent,
        copiedComponent // 拷贝的组件
    }
}

export default useGetComponentInfo
